<template>
	<view>
		<!-- 顶部搜索 -->
		<div class="search">
			<u-search shape="round" @focus="tosearchpage"></u-search>
		</div>
		<!-- 顶端轮播图 -->
		<div class="uni-margin-wrap">
			<swiper class="swiper" circular id="swpierbox" circular indicator-dots autoplay indicator-active-color="orange">
				<swiper-item v-for="(item,index) in swiperlist" class="swiperonce">
					<div>
						<img :src="item.img">
						<div class="modifybox">
							<p class="name"> {{item.name}}</p>
							<p class="modify"> {{item.modify}}</p>
							<div class="time_modifynum">
								<span>烹饪时间：{{item.time}}分钟</span>
								<span>所需食材：{{item.modifynum}}种</span>
							</div>
							<div class="hardness_eye">
								<span>
									烹饪难度：{{item.hardness}}
								</span>
								<span>
									<span>
										<uni-icons type="heart" size="20"></uni-icons>
										{{item.heart}}
									</span>
									<span>
										<uni-icons type="eye" size="20"></uni-icons>
										{{item.eye}}
									</span>
								</span>
							</div>
						</div>
					</div>
				</swiper-item>
			</swiper>
		</div>
		<!-- 导航菜单（速食锅、家常锅、早餐锅） -->
		<div class="navigation">
			<ul>
				<li v-for="(item,index) in navigationlist" @click="tonavigation(item.url+'?id='+item.id)">
					<div class="ovalbackground">
						<uni-icons :type="item.icon" size="30"></uni-icons>
					</div>
					<p>{{item.name}}</p>
				</li>
			</ul>
		</div>
		<!-- 阴影条 -->
		<div class="shadow_streak"></div>
		<!-- 厨房宝典 -->
		<div class="kitchen">
			<span class="title">厨房宝典</span>
			<div class="kitchenlist">
				<ul>
					<li v-for="(item) in kitchenlist" :style="{ 'background-image': 'url(' + item.img + ')'}">
						<div class="text">
							<p class="text1">{{item.name}}</p>
							<p class="text2"> {{item.hint}}</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!--热门推荐  -->
		<div class="hotrecommend">
			<span class="title">热门推荐</span>
			<div class="hotbox">
				<div class="oncetag" v-for="(item,index) in hotlist">
					<img :src="item.img" class="img">
					<div class="userIT">
						<p class="name">{{item.name}}</p>
						<div class="onceuser">
							<div class="user">
								<img :src="item.useravatar" class="useravatar">
								<span>{{item.username}}</span>
							</div>
							<div class="eye">
								<uni-icons type="eye" size="20"></uni-icons>
								<span>{{item.csannum}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>
<script>
	import {
		gethomeswiper,
		gethotrecommend,
		getnavgation
	} from "../../api/index.js"
	export default {
		data() {
			return {
				swiperlist: [],
				materials: '',
				navigationlist: [],
				kitchenlist: [{
						name: '做饭技巧',
						img: "https://z1.ax1x.com/2023/12/12/piWWNnI.png",
						hint: "厨房小白必看"
					},
					{
						name: '厨房用具',
						img: "https://z1.ax1x.com/2023/12/12/piWWhNT.png",
						hint: "厨房好物推荐"
					},
					{
						name: '专属菜单',
						img: "https://z1.ax1x.com/2023/12/12/piWWNnI.png",
						hint: "定制你的专属食谱"
					}
				],
				hotlist: []
			}
		},
		created() {
			gethomeswiper().then(res => {
				this.swiperlist = res.data
			})
			gethotrecommend().then(res => {
				this.hotlist = res.data
			})
			// 获取导航及后续tab切换
			getnavgation().then(res=>{
				this.navigationlist = res.data
				console.log(res.data);
				console.log(this.navigationlist);
			})
		},
		methods:{
			// 跳转到搜索页面
			tosearchpage(){
				uni.navigateTo({
					url:"/pages/Home/search"
				})
			},
			// 跳转到导航及后续tab切换
			tonavigation(value){
				console.log('跳转路由传过来的参数',value);
				uni.navigateTo({
					url:value
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	// 顶部搜索
	.search {
		width: 100%;
		height: 100rpx;
		text-align: center;
	}

	// 顶端轮播图
	.swiper {
		width: 750rpx;
		height: 540rpx;
		position: relative;

		.swiperonce img {
			width: 750rpx;
		}

		.modifybox {
			width: 630rpx;
			height: 200rpx;
			border-radius: 20rpx;
			padding: 20rpx 40rpx;
			background-color: white;
			position: relative;
			left: 20rpx;
			top: -220rpx;
			box-shadow: 0px 0px 26rpx 2rpx gray;

			.name {
				font-size: 40rpx;
				width: 160px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 4rpx;
			}

			.modify {
				margin-bottom: 30rpx;
			}

			.time_modifynum {
				display: flex;
				justify-content: space-between;
				width: 500rpx;
				color: rgb(148, 148, 148);
			}

			.hardness_eye {
				display: flex;
				justify-content: space-between;
				color: rgb(148, 148, 148);
				margin-top: 10rpx;
			}
		}
	}

	// 导航菜单（速食锅、家常锅、早餐锅）
	.navigation {
		width: 750rpx;
		height: 200rpx;
		text-align: center;
		overflow-x: scroll;

		ul {
			padding: 0;
			height: 100%;
			list-style: none;
			display: -webkit-box;
			-webkit-overflow-scrolling: touch;
			-ms-overflow-style: none;
			overflow: -moz-scrollbars-none;

			li {
				margin: 0 20rpx;
				width: 100rpx;
				height: 100%;
				line-height: 100rpx;

				.ovalbackground {
					width: 80rpx;
					height: 100rpx;
					border-radius: 45%;
					background-color: rgb(255, 205, 56);
				}
			}
		}
	}

	// 阴影条
	.shadow_streak {
		width: 100%;
		height: 20rpx;
		background-color: rgb(245, 245, 245);
	}

	// 厨房宝典
	.kitchen {
		padding-top: 20px;
		padding-left: 16rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			border-left: 5px solid rgb(255, 205, 56);
			padding-left: 6rpx;
			margin-bottom: 20rpx;
		}

		.kitchenlist {
			overflow-x: scroll;

			ul {
				margin-top: 20rpx;
				padding: 0;
				list-style: none;
				display: -webkit-box;
				-webkit-overflow-scrolling: touch;
				-ms-overflow-style: none;
				overflow: -moz-scrollbars-none;

				li {
					width: 350rpx;
					height: 220rpx;
					background-size: cover;

					.text {
						margin: 26rpx 0 0 30rpx;
						color: white;

						.text1 {
							font-size: 34rpx;
						}

						.text2 {
							font-size: 26rpx;
							opacity: 0.8;
						}
					}
				}
			}
		}
	}

	// 热门推荐
	.hotrecommend {
		width: 750rpx;
		height: auto;
		padding-top: 20px;
		padding-left: 16rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			border-left: 5px solid rgb(255, 205, 56);
			padding-left: 6rpx;
			margin-bottom: 20rpx;
		}

		.hotbox {
			column-count: 2;
			column-gap: 0;

			.oncetag {
				width: 95%;
				margin-top: 20rpx;
				border-radius: 20rpx;
				border-radius: 20rpx;
				box-shadow: 0px 0px 26rpx 2rpx gray;

				.img {
					width: 100%;
					height: auto;
				}

				.userIT {
					width: 100%;
					height: 160rpx;
					background-color: white;
					border-radius: 20rpx;

					.name {
						margin: 20rpx 2rpx;
						width: 90%;
						font-size: 32rpx;
						font-weight: bold;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.onceuser {
						display: flex;
						justify-content: space-around;
						flex-direction: row;
						align-items: center;

						.user {
							display: flex;
							flex-direction: row;
							align-items: center;

							.useravatar {
								margin-right: 20rpx;
								width: 60rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
  <view>
    <Issue />
    <p>食集</p>
  </view>
</template>

<script>
import Issue from "../../components/issue/issue.vue";
export default {
  components: {
    Issue,
  },
  data() {
    return {};
  },
  methods: {},
  onShow() {
    uni.$emit("page", {
      show: false,
    });
  },
};
</script>

<style></style>
